<template>
  <div class="page-sheet revision">
    <PageHeader>
      <template v-slot:page-number>
        <div class="page-number"></div>
      </template>
    </PageHeader>
    <div class="title_zh">更改记录<span class="en" v-if="en">(LIST OF REVERSIONS)</span></div>
    <div style="min-height: 210mm">
      <table border="1" style="border-collapse: collapse" contenteditable="false" class="unresizable">
        <thead>
          <tr>
            <th style="text-align: center" :style="{ width: en ? '32mm' : '20mm' }">
              <template v-if="en">版本<br /><span class="en">(REVESION)</span></template>
              <template v-else>版本</template>
            </th>
            <th style="text-align: center" :style="{ width: en ? '110mm' : '124mm' }">
              <template v-if="en">更改说明<br /><span class="en">(SUBJECT OF MODIFICATION)</span></template>
              <template v-else>更改说明</template>
            </th>
            <th style="width: 27mm; text-align: center">
              <template v-if="en">日期<br /><span class="en">(DATE)</span></template>
              <template v-else>日期</template>
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-if="revisionContentList.length">
            <tr v-for="(item, i) of revisionContentList" :key="i">
              <td style="text-align: center" :style="{ width: en ? '32mm' : '20mm' }">
                {{ item.revision }}
              </td>
              <td :style="{ width: en ? '110mm' : '124mm' }" v-html="getRevisionStr(item.revisionSubject)"></td>
              <td style="width: 27mm; text-align: center">{{ item.revisionDate }}</td>
            </tr>
          </template>
          <tr v-else style="height: 210mm">
            <td :style="{ width: en ? '32mm' : '20mm' }"><br /></td>
            <td :style="{ width: en ? '110mm' : '124mm' }"><br /></td>
            <td style="width: 27mm"><br data-mce-bogus="1" /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <PageFooter />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PageHeader from '../PageHeader.vue'
import PageFooter from '../PageFooter.vue'

export default {
  components: {
    PageHeader,
    PageFooter
  },
  methods: {
    getRevisionStr: (l) => l.reduce((acc, cur) => acc + `<p class="${l.length > 1 ? 'gt1' : ''}">${cur}</p>`, '')
  },
  computed: {
    ...mapGetters(['languageType']),
    en() {
      return this.languageType === 'both'
    },
    revisionContentList() {
      return this.$store.state.xmleditor.revisionContentList
    }
  }
}
</script>
